<template>
	<view class="">
		<view class="list">
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					姓名
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder-class="placeholder-class" placeholder="请输入姓名"
						v-model="dataForm.username" auto-focus="">
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					电话
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" placeholder-class="placeholder-class" type="number" placeholder="请输入电话"
						v-model="dataForm.phone">
				</view>
			</view>
			<!-- <view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					房产证
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入房产证号" v-model="houseNum">
				</view>
			</view> -->
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					购买时间
				</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right">
					<!-- <view class="no-data-r">请选择购买时间</view> -->
					<picker mode="date" :value="dataForm.buytime" name='buytime' :start="startDate" :end="endDate"
						@change="openbuytimeChange">
						<view class="uni-input" :class="dataForm.buytime ? '' : 'no-data-r'">
							{{dataForm.buytime ? dataForm.buytime : '请选择开店时间'}}
						</view>
					</picker>
				</view>
			</view>
			<!-- 			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					售价
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input type="number" placeholder="示例:30" v-model="buymoney">
					<text>万元</text>
				</view>
			</view> -->
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					产权地址
				</view>
				<view class="acea-row row-middle row-right item-r address">
					<input type="text" placeholder-class="placeholder-class" placeholder="请输入/选择地址"
						v-model="dataForm.address">
					<image src="../static/images/location.png" mode="" @click="chooseLocation"></image>
				</view>
			</view>
			<!-- 上传产权照片 -->
			<view class="module">
				<view class="acea-row row-middle row-between">
					<view class="module-title label-m">
						上传产权照片
					</view>
					<!-- <view class="example-text">
						图片示例
					</view> -->
				</view>
				<view class="example-text-l">
					<!-- 请至少添加一张照片，图片越多审核越快 -->
				</view>
				<view class="acea-row pictrue-list">
					<view class="pictrue" @click="selectPicture(0)">
						<view class="pictrue" v-if="dataForm.houseimage[0]">
							<image :src="dataForm.houseimage[0]" mode=""></image>
						</view>
						<view class="acea-row row-column row-center-wrapper pictrue" v-else>
							<view class="pictrue" v-if="dataForm.houseimage[0]">
								<image :src="dataForm.houseimage[0]" mode=""></image>
							</view>
							<view class="upload-icon">
								<image src="../static/images/upload_icon.png" mode=""></image>
							</view>
							<view>上传封面照片</view>
						</view>

					</view>
					<view class="pictrue" @click="selectPicture(1)">
						<view class="pictrue" v-if="dataForm.houseimage[1]">
							<image :src="dataForm.houseimage[1]" mode=""></image>
						</view>
						<view class="acea-row row-column row-center-wrapper pictrue" v-else>
							<view class="upload-icon">
								<image src="../static/images/upload_icon.png" mode=""></image>
							</view>
							<view>上传内页照片</view>
						</view>
					</view>

					<!-- 					<view class="acea-row row-column row-center-wrapper pictrue"
						v-for="(item,index) in contractImageList" :key="index" @click="deleteImage(index)">
						<image style="width: 218rpx;height: 172rpx;" :src=item mode=""></image>
					</view>
					<view class="acea-row row-column row-center-wrapper pictrue" @click="selectPicture"
						v-if="!contractImageList.length<10">
						<view class="upload-icon">
							<image src="../static/images/upload_icon.png" mode=""></image>
						</view>
						<view>上传内页照片</view>
					</view> -->

					<!-- <view class="acea-row row-column row-center-wrapper pictrue">
						<view class="upload-icon">
							<image src="../static/images/upload_icon.png" mode=""></image>
						</view>
						<view>添加店面照片</view>
					</view> -->
				</view>
				<!-- <view class="acea-row row-center row-center add-more-picture">
					<view>添加更多照片</view>
					<view class="jiantou-b"></view>
				</view> -->
			</view>
		</view>
		<view class="submit-btn" @click="completeRz">
			完成
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataForm: {
					username: '', //房东姓名
					phone: '', //电话
					houseNum: '', //房产证号
					buytime: '', //购买时间
					buymoney: '', //售价
					address: '', //房产地址
					houseimage: [],
				},
				requireFiledRule: [{
						filed: 'username',
						tip: '请输入姓名'
					},
					{
						filed: 'phone',	
						tip: '请输入电话'
					},
					{
						filed: 'buytime',
						tip: '请输入购买时间'
					},
					{
						filed: 'address',
						tip: '请输入产权地址'
					},
					// {
					// 	filed: 'houseimage',
					// 	tip: '请上传产权照片'
					// }
				]
			}
		},
		mounted() {
			let that = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('toInitRz', function({data}) {
				console.log(data)
				if (data && Object.keys(data).length > 0) {
					// data.houseimage = data.houseimage?.split(",");
					that.dataForm = Object.assign(data, {});
					console.log(that.dataForm)
				}
			})
		},
		methods: {
			openbuytimeChange(e) {
				console.log(e)
				this.dataForm.buytime = e.detail.value;
			},
			selectPicture(ind) {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					count: 5,
					name: 'multipart',
					model: "user",
					pid: 0,
				}, function(res) {
					that.dataForm.houseimage[ind] = res.data.url;
					that.dataForm.houseimage = JSON.parse(JSON.stringify(that.dataForm.houseimage))
				});
			},
			//选择地址
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.dataForm.address = res.address;
					},
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			completeRz() {
				let validate = this.customValidation(this.dataForm, this.requireFiledRule)
				if (!validate) {
					return;
				}
				const emitData = Object.assign(this.dataForm, {});
				emitData.houseimage = emitData.houseimage?.join(",")
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('realEstate', {
					data: this.dataForm
				});
				uni.navigateBack(1);
			},
			/**
			 * 非空字段验证
			 * @param {Object} data 验证的对象数据 
			 * @param {Array} rule 自定义验证规则 
			 * rule:{
			 *  filed 字段名
			 *  isRequire 是否必填
			 *} 
			 */
			customValidation(data, rule) {
				console.log(data,rule)
				if (!rule) {
					return false;
				}
				for (let i = 0; i < rule.length; i++) {
					let k = rule[i].filed
					let kType = typeof data[k];
					console.log(k,kType)
					if (kType === 'string' && (!data[k])) {
						this.$util.Tips({
							title: rule[i].tip
						})
						return false;
					} else if (kType === 'number') {
						
						//包含0 
						if (!(rule[i].isZero)) {
							if ((data[k] === 0) && (!data[k])) {
								this.$util.Tips({
									title: rule[i].tip
								})
								return false;
							}
						} else{
							if(!data[k]){
								this.$util.Tips({
									title: rule[i].tip
								})
								return false;
							}
						}
					}else if(kType == 'object'){
						if((data[k]==null)||(data[k]&&Object.keys(data[k]).length<=0)){
							this.$util.Tips({
								title: rule[i].tip
							})
							return false;
						}
					}
				}
				return true;
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';
</style>